Settings
Hi! Here some our recommendations to get the best out of BLACKBOX:
Be as clear as possible
End the question in what language you want the answer to be, e.g: ‘connect to mongodb in python
or you can just
Watch tutorial video
Here are some suggestion (choose one):
Write a function that reads data from a json file
How to delete docs from mongodb in phyton
Connect to mongodb in nodejs
send refresh
Blackbox AI Chat is in beta and Blackbox is not liable for the content generated. By using Blackbox, you acknowledge that you agree to agree to Blackbox's Terms and Privacy Policy

JavaScript Logic in Components

Firat Atalay
5 min readJun 18

Let’s now take a quick first look at writing logic inside of React components. Now we have already written some JavaScript logic before but we always did it just inside JSX that is returned. So just like here, right? But since components are just JavaScript functions, we can of course do any JavaScript in them that we want. And that code is then simply executed as soon as the function is caught. So as soon as the component is initialized.

So for example, here, we can create any new variable that we want. Let’s say hour, and here I will again create a new date, and then let’s say getHours and then we can log that to the console. And now we’re going to use that snippet for the first time that we set up earlier. So here we can just write cl, hit Enter, and then hour. So, let’s check out our console, and so here, yeah, we have the number 9.

So that’s currently the hour and now what I want to do here is to basically display an alert in the app whether the restaurant is currently open or not. So, let’s define a few more variables for that. So open hour, so let’s say that the pizzeria actually opens at 12:00 PM and closes at 10:00 PM so that’s 12 and 22 for the close hour. So closeHour 22. And so now again, we can use any JavaScript in here.

So let’s just write a simple if else statement saying that if the hour is greater or equal, the open hour, and the hour is less or equal the close hour, then just alert “We’re currently open!” So alert is just a built-in JavaScript function so that you should be familiar with. Maybe we’ll just use this here as a demonstration that we can write some simple JavaScript in here. So alert, “Sorry, we’re closed”. And here we need some double quotes like this. And here we have some bug. So probably JavaScript wants us to include the semicolon here. And there it is. So “sorry, we are closed”, and that’s because right now it is nine in the morning and you saw that it happened here twice. And that’s because of the strict mode that I was telling you before. So in strict mode, our components are usually rendered twice and so that’s why we got that alert twice as well.

Now, if we change the open hour here, let’s say to eight and re-render, then it says “We are currently open!” All right, now, this alert function is actually blocking JavaScript. And so that’s why it runs in the beginning but nothing else happens. And so of course this is really not ideal, and we wouldn’t use this in a real app, but this was just a short demo here anyway. So let’s just comment all of this out and just to use this code here because it will actually become useful later. Let’s create a variable here called isOpen. So that will then simply become a true or false value depending on whether this condition is true or false. Let’s lock that then to the console, like this.

Wow, what’s happening here? Yeah, that’s better. And you see that right now it’s open. Let’s set that back 12th, and there we go.

BONUS;

import React from "react";
import ReactDOM from "react-dom/client";

// const pizzaData = [
// {
// name: "Focaccia",
// ingredients: "Bread with italian olive oil and rosemary",
// price: 6,
// photoName: "pizzas/focaccia.jpg",
// soldOut: false,
// },
// {
// name: "Pizza Margherita",
// ingredients: "Tomato and mozarella",
// price: 10,
// photoName: "pizzas/margherita.jpg",
// soldOut: false,
// },
// {
// name: "Pizza Spinaci",
// ingredients: "Tomato, mozarella, spinach, and ricotta cheese",
// price: 12,
// photoName: "pizzas/spinaci.jpg",
// soldOut: false,
// },
// {
// name: "Pizza Funghi",
// ingredients: "Tomato, mozarella, mushrooms, and onion",
// price: 12,
// photoName: "pizzas/funghi.jpg",
// soldOut: false,
// },
// {
// name: "Pizza Salamino",
// ingredients: "Tomato, mozarella, and pepperoni",
// price: 15,
// photoName: "pizzas/salamino.jpg",
// soldOut: true,
// },
// {
// name: "Pizza Prosciutto",
// ingredients: "Tomato, mozarella, ham, aragula, and burrata cheese",
// price: 18,
// photoName: "pizzas/prosciutto.jpg",
// soldOut: false,
// },
// ];

function App() {
return (
<div>
<Header />
<Menu />
<Footer />
</div>
);
}

function Header() {
return <h1> Fast React Pizza Co. </h1>;
}

function Menu() {
return (
<div>
<h2>Our Menu</h2>
<Pizza />
<Pizza />
<Pizza />
<Pizza />
</div>
);
}

function Footer() {
const hour = new Date().getHours();
const openHour = 8;
const closeHour = 22;
const isOpen = hour >= openHour && hour <= closeHour;
console.log(isOpen);
return (
<footer>{new Date().toLocaleTimeString()}. We're currently open</footer>
);

// React.createElement("footer",null,"We're currently open" )
}

function Pizza() {
return (
<div>
<img src="pizzas/spinaci.jpg" alt="Pizza spinaci"></img>
<h2> Pizza Spinaci</h2>
<p>Tomato, mozarella, spinach, and ricotta cheese</p>
</div>
);
}

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);